<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swiper Custom Transition</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
</head>
<body>
  <div class="clear w-full h-screen justify-center flex p-0 m-0 relative bg-center bg-no-repeat bg-cover wen-screen" :style="bgpic">
    <div class="container w-full flex">
      <div class="w-full flex">
        <div class="wen-swiper w-full" id="honorlb">
          <div class="wen-swiper-show h-[600px] relative " style="height: 600px;">
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor1.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor2.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor3.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor1.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor2.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor3.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor1.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor2.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor3.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor1.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor2.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor3.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor1.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor2.jpg"></div></div>
            <div class="wen-swiper-slide"><div class="w-full"><img src="/src/assets/honor3.jpg"></div></div>
          </div>
          <div class="nav absolute bottom-0" style="margin-top: 120px;;">
            <div class="wen-swiper-prev-honor p-3 text-3xl">></div>
            <div class="wen-swiper-next-honor p-3 text-3xl">></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="clear w-full h-screen justify-center flex p-0 m-0 relative bg-center bg-no-repeat bg-cover wen-screen" :style="bgpic">
    <div class="container w-full flex">
      <div class="w-full h-full pt-[152px] mobile:pt-[80px] mobile:px-4 self-center bg-no-repeat wen-mobile-down">
        <div class="flex mb-[99px] mobile:mb-8">
            <span class="wen-index-title">资质证书</span>
        </div>
        <div class="flex p-2 relative mobile:mb-[30px] wow animate__animated animate__fadeInUp timing">
            <div class="w-1/3 block mobile:w-full" >
                <h3 class="text-3xl text-tblack my-8 font-bold line-clamp-1 mobile:mt-0 mobile:text-2xl"><a :href="data[0].url">{{ data[0].title }}</a></h3>
                <p class="text-xl !leading-relaxed text-gray3 w-full line-clamp-6 mobile:text-sm mobile:line-clamp-4"><a :href="data[0].url">{{ data[0].infor }}</a></p>
                <div class="mt-24 leading-10 font-bold flex mobile:mt-4 mobile:justify-center mobile:hidden">
                    <img class="inline-block w-12 mobile:w-8 swiper-button-prev" onclick="onSlidePrev()" src="/src/assets/Frame_27.svg" alt="">
                    <span class="text-[64px] px-6 mobile:text-4xl">12/13</span>
                    <img class="inline-block w-12 mobile:w-8 swiper-button-next" onclick="onSlideNext()" src="/src/assets/Frame_26.svg" alt="">
                </div>
            </div>
        </div>
        <div class="w-3/4 max-w-[1266px] mobile:max-w-full absolute ilmobile:-right-[105px] ilmobile:top-1/2 ilmobile:-translate-y-1/2 wen-bgi-taizi flex justify-items-center mobile:w-full mobile:left-0 mobile:relative">
            <div class="honorSwiper w-full translate-x-16 relative mobile:translate-x-0">
                <img class="absolute top-full w-1/2 left-1/2 -translate-x-1/2 mobile:hidden" src="/src/assets/taizi.png" />
                <div class="swiper honorSwiper mobile:w-[125%] ilmobile:h-[600px]" id="honorSwiper">
                  <div class="swiper-wrapper">
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor1.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor2.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor3.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor1.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor2.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor3.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor1.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor2.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor3.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor1.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor2.jpg" /></div>
                      <div class="swiper-slide w-1/3 mobile:w-1/2 p-16 timing opacity-0 mobile:!p-1"><img class="w-full" src="/src/assets/honor3.jpg" /></div>
                  </div>
                </div>
                <div class="mt-24 leading-10 font-bold flex mobile:mt-10 mobile:justify-center ilmobile:hidden">
                    <img class="inline-block w-12 mobile:w-8" onclick="onSlidePrev()" src="/src/assets/Frame_27.svg" alt="">
                    <span class="text-6xl px-3 mobile:text-4xl">20/40</span>
                    <img class="inline-block w-12 mobile:w-8" onclick="onSlideNext()" src="/src/assets/Frame_26.svg" alt="">
                </div>
            </div>
        </div>
    </div>
  </div>
</div>
<script type="module" src="/src/main.js"></script>
<script src="/src/assets/wow.min.js"></script>
<script>
  let wow = new WOW({
      boxClass:     'wow',      // default
      animateClass: 'animate__animated', // default
      offset:       0,          // default
      mobile:       true,       // default
      live:         true        // default
  })
  wow.init();
</script>
 
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var mySwiper = new Swiper('.my-swiper', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
 
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
 
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
 
    // Custom transition
    on: {
      slideChangeTransitionStart: function() {
        var activeIndex = this.activeIndex;
        var nextIndex = (activeIndex + 1) % this.slides.length;
        var prevIndex = (activeIndex + this.slides.length - 1) % this.slides.length;
        var nextBIndex = (activeIndex + 2) % this.slides.length;
        var prevBIndex = (activeIndex + this.slides.length - 2) % this.slides.length;
        
        let lunbo = [
          'opacity: 0;-webkit-filter: opacity(0); left:-64px;right:auto;padding:64px;',
          'opacity: 0.6;-webkit-filter: opacity(60); left:0;right:auto;padding:64px;',
          'opacity: 1;-webkit-filter: opacity(100); left:50%;right:auto;padding:0px; transform: translate(-50%,-50%);z-index:1;',
          'opacity: 0.6;-webkit-filter: opacity(60); left:auto;right:0;padding:64px;',
          'opacity: 0;-webkit-filter: opacity(0); left:auto;right:-64px;padding:64px;',
          'opacity: 0;-webkit-filter: opacity(0); left:auto;right:auto;',
        ]
        this.slides[prevBIndex].style = lunbo[0];
        this.slides[prevIndex].style = lunbo[1];
        this.slides[activeIndex].style = lunbo[2];
        this.slides[nextIndex].style = lunbo[3];
        this.slides[nextBIndex].style = lunbo[4];
      },
      slideChangeTransitionEnd: function() {
      }
    }
  });

  const count = 0;
  const current = {};
  current.value = 1
  let onSlidePrev = ()=>{};
  let onSlideNext = ()=>{};
  let bindleChangCurrent = (index)=>{
    current.value = index + 1;
  }
    // const swiper = honorSwiper.$swiper;
    // honorSwiper.navigation.init();
    let cutNum = isMobile()?2:3;
    let cutCenter = isMobile()?false:true;
    console.log('cutNum',cutNum);
    var mySwiper = new Swiper('#honorSwiper', {
      direction:'horizontal',// 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      slidesPerView: cutNum,
      centeredSlides: cutCenter,
      spaceBetween: 1,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        type: "fraction",
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // Custom transition
      on: {
        slideChangeTransitionStart: function() {
          var activeIndex = this.activeIndex;
          var nextIndex = (activeIndex + 1) % this.slides.length;
          var prevIndex = (activeIndex + this.slides.length - 1) % this.slides.length;
          var nextBIndex = (activeIndex + 2) % this.slides.length;
          var prevBIndex = (activeIndex + this.slides.length - 2) % this.slides.length;
  
          let lunbo = [
            'opacity: 0;-webkit-filter: opacity(0); left:-64px;right:auto;padding:64px;',
            'opacity: 0.6;-webkit-filter: opacity(60); left:0;right:auto;padding:64px;',
            'opacity: 1;-webkit-filter: opacity(100); left:50%;right:auto;padding:0px; transform: translate(-50%,-50%);z-index:1;',
            'opacity: 0.6;-webkit-filter: opacity(60); left:auto;right:0;padding:64px;',
            'opacity: 0;-webkit-filter: opacity(0); left:auto;right:-64px;padding:64px;',
            'opacity: 0;-webkit-filter: opacity(0); left:auto;right:auto;',
          ]
          this.slides[prevBIndex].style = lunbo[0];
          this.slides[prevIndex].style = lunbo[1];
          this.slides[activeIndex].style = lunbo[2];
          this.slides[nextIndex].style = lunbo[3];
          this.slides[nextBIndex].style = lunbo[4];
        },
        slideChangeTransitionEnd: function() {
          
        }
      },
      
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
    onSlidePrev = ()=>{
      mySwiper.slidePrev();
      bindleChangCurrent(mySwiper.realIndex);
    }
    onSlideNext = ()=>{
      mySwiper.slideNext();
      bindleChangCurrent(mySwiper.realIndex);
    }

    function isMobile() {
      const mobileWidthThreshold = 768; // 设定移动端宽度阈值为768px
      // console.log('window.innerWidth:',window.innerWidth);
      return window.innerWidth <= mobileWidthThreshold;
    }


    class wenSwiper {
      constructor(name,func){
        this.swiper = document.querySelector(name);
        this.shower = this.swiper.querySelector(func.show || '.wen-swiper-show');
        this.slideLeng = this.shower.querySelectorAll('.wen-swiper-slide').length;
        this.__func = func;

        this.current = func.current || 0;
        this.viewNum = func.viewNum || 1;
        this.viewCenter = func.viewCenter || false;
        
        this.change();

        if(func.navigation){
          console.log('注册上下按钮事件');
          this.prevEl = document.querySelector(func.navigation.btnPrev || '.wen-swiper-prev');
          this.prevEl.addEventListener('click',()=>{this.slidePrev()});
          this.nextEl = document.querySelector(func.navigation.btnNext || '.wen-swiper-next');
          this.nextEl.addEventListener('click',()=>{this.slideNext()});
        }
      }

      change(){
        if(this.__func.change){
          this.__func.change(this);
          return;
        }
        this.shower.style.translate = 'translate3d('+ 0 -this.swiper.innerWidth/((this.viewNum || 1) + Math.floor(this.viewNum/2))%this.slideLeng+'px, 0px, 0px)';
      }
      // 跳到位置
      slideTo(){
        console.log('slideLeng:',this.slideLeng);
        this.current = (this.current<0?this.current+this.slideLeng:this.current)%this.slideLeng;
        this.change();
      }
      // 下一个
      slideNext(){
        console.log('下一个',this);
        this.current++;
        this.slideTo()
      }
      // 上一个
      slidePrev(){
        console.log('上一个',this);
        this.current--;
        this.slideTo()
      }
    }


    let honorlb = new wenSwiper('#honorlb',{
      viewNum:3,
      current:0,
      viewCenter:true,
      isMobile: isMobile(),
      navigation:{
        btnPrev:'.wen-swiper-prev-honor',
        btnNext:'.wen-swiper-next-honor'
      },
      change: (that)=>{
        console.log('change that:', that);
        let lunbo = [
          'opacity: 0;-webkit-filter: opacity(0); left:-128px;right:auto;padding:128px;',
          'opacity: 0.6;-webkit-filter: opacity(60); left:0;right:auto;padding:64px;',
          'opacity: 1;-webkit-filter: opacity(100); left:50%;right:auto;padding:0px; transform: translate(-50%,-50%);z-index:1;',
          'opacity: 0.6;-webkit-filter: opacity(60); left:auto;right:0;padding:64px;',
          'opacity: 0;-webkit-filter: opacity(0); left:auto;right:-128px;padding:128px;',
          'opacity: 0;-webkit-filter: opacity(0); left:auto;right:auto;',
        ]

        console.log('手机端',that.__func.isMobile);
        if(that.__func.isMobile){
          lunbo = [
            'opacity: 0;-webkit-filter: opacity(0); left:-100%;',
            'opacity: 0.6;-webkit-filter: opacity(60); left:-50%;',
            'opacity: 1;-webkit-filter: opacity(100); left:0%;z-index:1;',
            'opacity: 0.6;-webkit-filter: opacity(60); left:50%;',
            'opacity: 0;-webkit-filter: opacity(0); left:100%;',
            'opacity: 0;-webkit-filter: opacity(0); left:auto;',
          ]
        }
        let nodes = that.shower.querySelectorAll('.wen-swiper-slide');
        console.log(nodes);
        nodes.forEach((element,index) => {
          // console.log('index:',index,' current:',that.current);
          let _current = index-that.current;
          if(_current<0)_current +=that.slideLeng;
          if(_current>that.slideLeng)_current -=that.slideLeng;
          switch(_current){
            case nodes.length-2:
            case -2:{
              element.style = lunbo[0];
              break;
            }
            case nodes.length-1:
            case -1:{
              element.style = lunbo[1];
              break;
            }
            case nodes.length:
            case 0:{
              element.style = lunbo[2];
              break;
            }
            case nodes.length+1:
            case 1:{
              element.style = lunbo[3];
              break;
            }
            case nodes.length+2:
            case 2:{
              element.style = lunbo[4];
              break;
            }
            default:{
              element.style = lunbo[5];
            }
          }
        });
        // classList.add("active");

      }
    })

    honorlb.change();
  </script>
  <style>
    .honorSwiper>.swiper-wrapper>.swiper-slide{transition-duration: 500ms;}
    .honorSwiper>.swiper-wrapper>.swiper-slide.swiper-slide-prev{opacity: 0.6;-webkit-filter: opacity(60);}
    .honorSwiper>.swiper-wrapper>.swiper-slide.swiper-slide-active{opacity: 1;-webkit-filter: opacity(100);padding: 0px;}
    .honorSwiper>.swiper-wrapper>.swiper-slide.swiper-slide-next{opacity: 0.6;-webkit-filter: opacity(60);}

    #honorlb{overflow: hidden;}
    .wen-swiper-show{box-sizing: content-box;width: fit-content;width: 100%;display: flex;}
    .wen-swiper-slide{width: 50%; display: block;position: absolute;left: 50%;top: 50%; transform: translateY(-50%);transition: all 600ms;}
    
    @media screen and (orientation: landscape) {
      .wen-swiper-slide{padding: 128px;width: 33%;}
    }
    @media screen and (orientation: portrait) {
      .wen-swiper-slide{padding: 1em;width: 50%;}
      
    }
  </style>
  
</body>
</html>